<template>
  <div class="index">
    <transition>
      <router-view />
    </transition>
    <footer>
      <router-link v-for="(item,index) in footlist" :key="index" :to="item.id"
          :class="{
            iconfont: true,
            [item.icon]: true,
          }"
        >
          <span class="iconfont"></span><p>{{item.name}}</p></router-link>
    </footer>
  </div>
</template>

<script>

export default {
  name: 'Index',
  data() {
    return {
      footlist: [
        {id:'/index/home', icon: "icon-home", name: "首页" },
        {id:'/index/bao', icon: "icon-xitongrizhi", name: "爆爆团" },
        {id:'/index/dan', icon: "icon-zhuantiguanli", name: "订单" },
        {id:'/index/ge', icon: "icon-yonghu", name: "我的" },
      ],
    };
    
  },
}
</script>
<style scoped>
footer {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px;
  border-top: 1px solid #ccc;
  box-sizing: border-box;
  position: fixed;
  height: 11vh;
  width: 100vw;
  bottom: 0;
  background-color: rgb(255, 255, 255);
}

footer .iconfont{
  font-size: 35px;
}
footer p{
  font-size: 16px;
}
.v-enter{
  opacity: 0;
}
.v-enter-active{
transition: all 0.2s;
}
.v-enter-to{
  opacity: 1;
}
.v-leave{
  opacity: 1;
}
.v-leave-active{
transition: all 0.3s;
}
.v-leave-to{
  opacity: 0;
  transform: rotate(0deg);
}

</style>
